<template>
  <div class="MicEquivalentHourbox">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="righttopbox">
        <div>
          <el-radio-group
            v-model="radio3"
            size="small"
            style="margin-right: 10px"
          >
            <el-radio-button label="1">日</el-radio-button>
            <el-radio-button label="2">月</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-if="radio3 == '1'"
            v-model="value1"
            type="date"
            placeholder="选择日期"
            size="small"
          ></el-date-picker>
          <el-date-picker
            v-if="radio3 == '2'"
            v-model="value2"
            type="month"
            placeholder="选择月"
            size="small"
          ></el-date-picker>
          <el-date-picker
            v-if="radio3 == '3'"
            v-model="value3"
            type="year"
            placeholder="选择年"
            size="small"
          ></el-date-picker>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重置</el-button>
          <el-button
            size="small"
            type="primary"
            @click="gethournengxiao(treevalue)"
            >查询</el-button
          >
        </div>
      </div>
      <div class="rightbodybox">
        <div class="titlebox">
          <div>等效小时</div>
          <div class="righttitle">
            <TopTile
              @command="command"
              @daochu="daochu"
              @shuaxin="shuaxin"
            ></TopTile>
          </div>
        </div>
        <div class="echandtabbox">
          <div class="dengxiaoech" ref="dengxiaoech"></div>
          <div class="tutext">
            与平均等效小时偏差比例： 优秀: {{ objvalue.youxiu }}%,良好:
            {{ objvalue.lianghao }}%，正常: {{ objvalue.zhengchang }}%，较差:
            {{ objvalue.jiaocha }}%,异常: {{ objvalue.yichang }}%
          </div>
          <div class="dengxiaoech table">
            <TableColumn
              ref="tabledata"
              :tableData="tableData"
              :tableConfig="tableConfigs"
              :issize="issize"
            >
            </TableColumn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getdengxiaolistapi } from "@/api/Microgrid/Statistics/MicEquivalentHour";
import NocheckTree from "../component/ClickTree";
import TopTile from "@/components/TopTitle/index.vue";
import * as echarts from "echarts";
import { exportexcel } from "@/utils/excel";
import TableColumn from "@/components/Table/index.vue";
export default {
  name: "CallPoliceIndex",
  components: {
    TopTile,
    TableColumn,
    NocheckTree,
  },
  data() {
    return {
      objvalue: {},
      radio3: "1",
      value1: "",
      value2: "",
      value3: "",
      issize: "medium",
      tableData: [],
      treevalue: {},
      tableConfigs: [
        { label: "序号", type: "index", center: "center", width: "70" },
        { label: "电站名称", prop: "systemName" },
        { label: "逆变器名称", prop: "name" },
        { label: "额定功率(kW)", prop: "capacity", center: "right" },
        { label: "日发电量(kWh)", prop: "powerGeneration", center: "right" },
        { label: "等效小时(h)", prop: "hours", center: "right" },
        { label: "平均等效小时(h)", prop: "avgHours", center: "right" },
        { label: "等效小时偏差(h)", prop: "hoursDeviation", center: "right" },
        { label: "差值比率(%)", prop: "rate", center: "right" },
      ],
    };
  },

  mounted() {
    this.gettime();
  },

  methods: {
    // 树节点点击
    handleNodeClicks(val) {
      console.log(val);

      this.treevalue = val;
      this.gethournengxiao(val);
    },
    chongzhi() {
      this.radio3 = "1";
      this.gettime();
      this.gethournengxiao(this.treevalue);
    },
    // 获取等效小时图表
    async gethournengxiao(val) {
      var chartDom = this.$refs.dengxiaoech;
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: "loading",
        spinner: "el-icon-loading",
        target: chartDom,
      });
      this.$refs.tabledata.loading = true;
      const {
        data: { list, content },
      } = await getdengxiaolistapi({
        classId: val.id,
        dateString:
          this.radio3 == "1"
            ? this.value1
            : this.radio3 == "2"
            ? this.value2
            : this.value3,
        dateType: this.radio3,
        className: val.name,
      });
      this.tableData = list;
      this.$refs.tabledata.loading = false;
      const array = content.split(",");
      const datalist = [
        { value: array[0], name: "正常" },
        { value: array[1], name: "良好" },
        { value: array[2], name: "优秀" },
        { value: array[3], name: "较差" },
        { value: array[4], name: "异常" },
        { value: array[5], name: "无数据" },
      ];
      const obj = {};
      const sum = array.reduce((acc, cur) => +acc + +cur, 0);
      obj["zhengchang"] = ((array[0] / sum) * 100).toFixed(1);
      obj["lianghao"] = ((array[1] / sum) * 100).toFixed(1);
      obj["youxiu"] = ((array[2] / sum) * 100).toFixed(1);
      obj["jiaocha"] = ((array[3] / sum) * 100).toFixed(1);
      obj["yichang"] = ((array[4] / sum) * 100).toFixed(1);
      obj["wushuju"] = ((array[5] / sum) * 100).toFixed(1);
      this.objvalue = obj;
      array;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "center",
          right: "20%",
          orient: "vertical",
          align: "right",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["65%", "70%"],
            avoidLabelOverlap: false,
            padAngle: 1,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              normal: {
                formatter: "{b}\n{c}",
                rich: {
                  c: {
                    color: "inherit",
                    fontSize: 10,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    fontSize: 18,
                    height: 40,
                  },
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 40,
              smooth: true,
            },
            data: datalist,
          },
        ],
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close();
    },
    // 导出
    daochu() {
      exportexcel(
        "mgd-microservice-biz/mgd/equivalent/hour/exportExcel",
        {
          classId: this.treevalue.id,
          dateString:
            this.radio3 == "1"
              ? this.value1
              : this.radio3 == "2"
              ? this.value2
              : this.value3,
          dateType: this.radio3,
          className: this.treevalue.name,
        },
        "等效小时分析"
      );
    },
    // 刷新
    shuaxin() {
      this.gethournengxiao(this.treevalue);
      this.$message.success("列表刷新成功");
    },
    // 调节表格密度
    command(val) {
      if (val === "默认") {
        this.issize = "medium";
      } else if (val === "中等") {
        this.issize = "small";
      } else {
        this.issize = "mini";
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date();
      const year = date.getFullYear(); // 年
      const mon = date.getMonth() + 1; // 月
      const month = mon < 10 ? "0" + mon : mon;
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //日
      this.$set(this, "value1", year + "-" + month + "-" + day);
      this.$set(this, "value2", year + "-" + month);
      this.$set(this, "value3", year.toString());
    },
  },
};
</script>

<style scoped>
.MicEquivalentHourbox {
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox {
    width: calc(100% - 310px);
    height: 100%;
    .righttopbox {
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .button {
        width: 60px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-left: 10px;
      }
      .sure {
        color: #fff;
        background-color: #1890ff;
      }
    }
    .rightbodybox {
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .titlebox {
        display: flex;
        justify-content: space-between;
      }
      .echandtabbox {
        height: 96%;
        .dengxiaoech {
          height: 48%;
        }
        .tutext {
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
